<template>
  <div>
    <top></top>

    <div class="MainForm">
      <div class="FirstFloorText">
        <a @click="goCategory('REPTILE')" class="ReptileText">
          <div class="ReptileText-div">
            <ul class="ReptileText-ul"></ul>
          </div>
        </a>

        <a @click="goCategory('FISH')" class="FishText" categoryId="FISH">
          <div class="FishText-div">
            <ul class="FishText-ul"></ul>
          </div>
        </a>
        <!-- <div class="Welcome">
          <div class="WelcomeContentHere">
            <h1>Here,</h1>
          </div>
          <div class="WelcomeContentLove">
            <h1>find what you love</h1>
          </div>
        </div> -->
        <a @click="goCategory('BIRDS')" class="BirdText" categoryId="BIRDS">
          <div class="BirdText-div">
            <ul class="BirdText-ul"></ul>
          </div>
        </a>

        <a @click="goCategory('DOGS')" class="DogText" categoryId="DOGS">
          <div class="DogText-div">
            <ul class="DogText-ul"></ul>
          </div>
        </a>
        <a @click="goCategory('CATS')" class="CatText" categoryId="CATS">
          <div class="CatText-div">
            <ul class="CatText-ul"></ul>
          </div>
        </a>
      </div>
    </div>

    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from "./common/Bottom.vue";
import Top from "./common/Top.vue";
export default {
  components: {
    Bottom,
    Top,
  },
  methods: {
    goCategory(type) {
      this.$router.push({
        path: "/category/" + type,
      });
    },
  },
};
</script>

<style scoped>
@import url(../assets/css/mypetstoreNew.css);
</style>
